<template>
	<view class="column" style="margin-top: 200rpx;">
		<view class="column center font600 minau size36" style="color: #EB951E;">
			<image src="@/static/tabBar/index.png" mode="" style="width: 400rpx;height: 300rpx;"></image>
			文山土流农业
		</view>
		<view class="box">
			<view class="size36 font600" style="color: #4D2F00;">
				注册
			</view>
			<view class="padbottom20" style="border-bottom: 2rpx solid #FFE5A3;">
				<view class="u-demo-block__content" style="margin-top: 15px;">
					<!-- #ifndef APP-NVUE -->
					<u-input placeholder="请输入登录手机号" type="number" maxlength="11" border="none" fontSize="14px"
						v-model="phone">
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input placeholder="请输入登录手机号" type="number" maxlength="11" border="none" fontSize="14px"
							v-model="phone">
						<!-- #endif -->
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
								<u-button @tap="getCode" :text="tips" shape="circle" customStyle="color: #885400;"
									hairline="false" type="info" size="small"></u-button>
							</template>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</view>
			</view>
			<view class="padbottom20 mintop20" style="border-bottom: 2rpx solid #FFE5A3;">
				<view class="u-demo-block__content" style="margin-top: 15px;">
					<u--input placeholder="请输入验证码" placeholderStyle="color: #B89865" type="number" border="none"
						fontSize="14px" v-model="code"></u--input>
				</view>
			</view>
			<view style="margin-top: 120rpx;margin-bottom: 20rpx;">
				<u-button shape="circle" color="linear-gradient( 136deg, #FFBC43 0%, #FFDA97 100%)"
					customStyle="color: #885400;font-weight: 600;" text="注册" @click="handleinput"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '发送验证码',
				phone: '',
				code: ''
			}
		},
		onLoad() {

		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			handleinput() {
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (!this.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!strTemp.test(this.phone)) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else if (!this.code) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				} else {

					this.getLogin();
					//第一个参数是 缓存的key值 就是说 这个缓存 存在storage 里面的名字
					// uni.setStorageSync('token', token);
				}
			},
			getCode() {
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (!this.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (!strTemp.test(this.phone)) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				} else {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}
			}

		}
	}
</script>

<style>
	page {
		background: linear-gradient(180deg, #FFF4D3 10%, #FFFFFF 30%);
		background-repeat: no-repeat;
	}
</style>

<style scoped lang="less">
	.box {
		padding: 40rpx 50rpx;
		margin: auto 80rpx;
		margin-top: 100rpx;
		background-color: #FFFAED;
	}
</style>